<template>
	<view class="all-main">
		<u-loading-page :loading="loadding" loading-mode="semicircle" loading-text="欢迎进入风动社区"></u-loading-page>
		<view v-if="!loadding" class="main">
			<view class="lists">
				<view v-if="proList.length > 0" v-for="(item, index) in proList" :key="index" class="items">
					<view class="top">
						<view class="lefts">
							{{item.nickname}}
						</view>
						<view class="rights">
							<text v-if="item.status == 1" class="reds">待审核</text>
							<text v-if="item.status == 2" class="greens">已审核</text>
							<text v-if="item.status == 4" class="warns">已拒绝</text>
						</view>
					</view>
					<u-line></u-line>
					<view class="cons">
						<view class="image">
							<u--image :src="item.image" width="50" height="50" shape="square" radius="10"></u--image>
						</view>
						<view class="title">
							<view class="titles">
								{{item.name}}
							</view>
							<u-line dashed=""></u-line>
							<view class="nums">
								<text>申请数量</text>
								<text class="tit">{{item.number}}</text>
							</view>
						</view>
					</view>
					<u-line></u-line>
					<view class="bottom">
						<view class="lefts">
							<text>{{item.create_time}}</text>
						</view>
						<view class="rights">
							<view v-if="item.status == 1 && customerinfo.is_typs == 4" class="btn blues" @click="checkApply(2, item.id)">
								同意
							</view>
							<view v-if="item.status == 1 && customerinfo.is_typs == 4" class="btn reds" @click="checkApply(4, item.id)">
								拒绝
							</view>
						</view>
					</view>
				</view>
				<u-empty v-if="proList.length <= 0" mode="order" icon="../../../static/Empty/data_null.png"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	var util = require('@/util/request5.js');
	export default {
		data() {
			return {
				loadding: true,
				product_id: '',
				product_name: '',
				proList: [],
				number: 0,
				customerinfo: {},
				is_true: true
			}
		},
		onLoad() {
			this.customerinfo = uni.getStorageSync('customerinfo');
			this.getProduct()
		},
		methods: {
			// 获取产品
			async getProduct() {
				const {
					data: res
				} = await this.$myHttp5({
					url: 'gift/getGiftApplyList',
					header: {
						'token': this.customerinfo.token
					}
				});
				this.loadding = false
				if (res.code == 1) {
					res.data.map(item => {
						item.image = util.API_URL + item.image
					})
					this.proList = res.data
				}
			},
			// 审核订单
			checkApply(type, id) {
				var msg = '确定要取消吗？'
				if (type == 2) {
					msg = '确定要拒绝吗？'
				}
				var that = this
				uni.showModal({
					title: '提示',
					content: msg,
					success: function(res) {
						if (res.confirm) {
							that.checkApplyFun(type, id)
						}
					}
				});
			},
			// 审核订单 - 方法
			async checkApplyFun(type, id) {
				var that = this
				if (this.is_true) {
					this.is_true = false
					uni.showLoading({
						title: '加载中'
					});
					const {
						data: res
					} = await this.$myHttp5({
						url: 'gift/checkApply',
						data: {
							apply_id: id,
							type: type
						},
						header: {
							'token': this.customerinfo.token
						}
					});
					this.is_true = true
					uni.hideLoading()
					uni.showToast({
						title: '操作成功',
						icon: "none"
					});
					if (res.code == 1) {
						setTimeout(function() {
							that.getProduct()
						},1500)
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f3f4f6;
	}
	
	.all-main {
		.main {
			padding: 20rpx;
			.lists {
				.items {
					background-color: #ffffff;
					margin-bottom: 20rpx;
					border-radius: 16rpx;
					.top {
						padding: 20rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.rights {
							font-size: 24rpx;
							.reds {
								color: #fa3534;
							}
							.greens {
								color: #19be6b;
							}
							.warns {
								color: #ff9900;
							}
						}
					}
					.cons {
						padding: 20rpx;
						display: flex;
						justify-content: flex-start;
						.image {
							width: 20%;
						}
						.title {
							width: 80%;
							padding-left: 20rpx;
							.titles {
								font-size: 30rpx;
								font-weight: bold;
								padding-bottom: 10rpx;
							}
							.nums {
								padding-top: 10rpx;
								font-size: 28rpx;
								display: flex;
								justify-content: space-between;
								.tit {
									color: #fa3534;
									font-weight: bold;
								}
							}
						}
					}
					.bottom {
						padding: 20rpx;
						font-size: 26rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						color: #c8c9cc;
						.rights {
							display: flex;
							justify-content: flex-end;
							.btn {
								margin-left: 20rpx;
								padding: 10rpx 20rpx;
								color: #ffffff;
								border-radius: 10rpx;
							}
							.reds {
								background-color: #fa3534;
							}
							.blues {
								background-color: #2979ff;
							}
						}
					}
				}
			}
		}
	}
</style>
